<template>
  <div class="location">
     <van-nav-bar
      title="城市定位"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    fixed/>
    <div class="searchbox">
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          class="searchbox"
        />
      </form>
    </div>

    <ul>
      <li v-for="item in list" :key="item.id" @click="goHome(item)">
        {{ item.name }}
      </li>
    </ul>
    <div class="current">当前位置:</div>
    <div id="container"></div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      city: "",
      list: [],
    };
  },
  computed: {
    ...mapState(["cityInfo"]),
  },
  watch: {
    value() {
      var _this = this;
      AMap.plugin("AMap.AutoComplete", function () {
        var autoOptions = {
          //city 限定城市，默认全国
          city: _this.city,
        };
        // 实例化AutoComplete
        var autoComplete = new AMap.AutoComplete(autoOptions);
        // 根据关键字进行搜索
        autoComplete.search(_this.value, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          _this.list = result.tips;
        });
      });
    },
  },
  mounted() {
    var _this = this;
    //获取当前搜索位置,切换地图坐标
    if (this.cityInfo.name) {
      var map = new AMap.Map("container", {
        zoom: 14, //级别
        center: [this.cityInfo.location.lng, this.cityInfo.location.lat], //中心点坐标
      });
      var marker = new AMap.Marker({
        position: [this.cityInfo.location.lng, this.cityInfo.location.lat], //位置
      });
      marker.setLabel({
        // offeset:new AMap.Pixel(0,0),
        content: this.cityInfo.name,
        direction: "top-center",
      });
      map.add(marker);
    } else {
      var map = new AMap.Map("container", {
        zoom: 14, //级别
      });
    }
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          console.log(result);
          _this.city = result.city;
        }
      });
    });
    var marker = new AMap.Marker({
      position: [113.598609, 34.747034], //位置
    });
    marker.setLabel({
      // offeset:new AMap.Pixel(0,0),
      content: "不凡学院",
      direction: "top-center",
    });
    map.add(marker);
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1);
    },
    goHome(val) {
      this.uptCityInfo(val);
      this.$router.push("/home");
    },
    ...mapMutations(["uptCityInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.location {
  position: relative;
  background-color: #ede9e9;
  .title {
    text-align: center;
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    height: 79px;
    line-height: 79px;
    background-color: #fff;
  }
  .searchbox {
    width: 100%;
    height: 142px;
    background-color: #fff;
  }
  #container {
    width: 710px;
    height: 342px;
    // margin: 0 auto;
    position: fixed;
    bottom: 58px;
    left: 21px;
  }
  .current {
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    position: fixed;
    bottom: 424px;
    left: 21px;
  }
}
</style>